<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas绘制线条</title>
	</head>
	<body>
		<canvas id="canv" width="500" height="500" style="border:solid 2px red;">
			当前浏览器不支持canvas
		</canvas>		
		<script>
			//获取画布元素
			var oC=document.getElementById("canv");   
			//获取canvas绘图上下文环境
			var ctx=oC.getContext("2d");
			//设置画笔的起点
			ctx.moveTo(100,100);
			//设置画笔的终点（移动的坐标）
			ctx.lineTo(300,100);
			//给线条设置宽度
			ctx.lineWidth=7;
			//给线段设置端点样式为圆形
			ctx.lineCap="round";
			//绘制路径,描边，默认为黑色。如果没有此方法，则线段无法显示
			ctx.stroke();
		</script>
	</body>
</html>
